<template>
	<div>
		<van-row>
		  <van-col span="2"></van-col>
		  <van-col span="20">
			  
			  <div style="margin-top: 100px;">
				  <h1>你又丢失了密码</h1>
				  <van-form >
				    <van-cell-group inset>
				      <van-field
						clearable
				        v-model="user.phone"
				        label="手机号"
				        placeholder="请输入手机号"
				        :rules="[{ required: true, message: '请输入手机号' }]"
					
				      />
					  <van-field
					      v-model="code"
					      center
					      clearable
					      label="短信验证码"
					      placeholder="请输入短信验证码"
					    >
					      <template #button>
					        <van-button size="small" type="primary" @click="sendCode()">发送验证码</van-button>
					      </template>
					    </van-field>
				      <van-field
				        v-model="user.password"
				        type="password"
				        label="密码"
				        placeholder="请输入密码"
				        :rules="[{ required: true, message: '请输入密码' }]"
				      />
					  <van-field
					    v-model="password2"
					    type="password"
					    label="确认密码"
					    placeholder="请再次输入密码"
					    :rules="[{ required: true, message: '请输入确认密码' }]"
					  />
				    </van-cell-group>
					
				    <div style="margin: 16px;">
				      <van-button round block type="primary" @click="findpass()">
				        找回密码
				      </van-button>
				    </div>
					<div style="margin-top: 16px;">
						<van-row>
						  <van-col span="8"><router-link to="/register">注册账号</router-link></van-col>
						  <van-col span="8"></van-col>
						  <van-col span="8"><router-link to="/login">登录账号?</router-link></van-col>
						</van-row>
					</div>
				  </van-form>
			  </div>
		  </van-col>
		  <van-col span="2"></van-col>
		</van-row>
		
	</div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
  },
  data(){
	  return{
		 user:{
		 	phone: "",
		 	password: "",
		 },
		code:"",
		password2:""
	  }
  },methods:{
	 
	  //发送手机验证码
	  sendCode(){
	  		  this.axios.get("sms/sendfcode?phone="+this.user.phone).then((res) => {
	  			 if(res.data.code==200){
	  				 //可用
	  				this.$toast.success('验证码已发送，请注意查收');
	  				
	  			 }else{
	  				 //存在，不可用
	  				 this.$toast.fail('网络异常');
	  			 }
	  		  });
	  },
	  //校验手机验证码
	  ckCode(){
		  var uc={
		  		phone:this.user.phone,
		  		code:this.code
		  }
	  	 this.axios.post("sms/findcode",uc).then((res) => {
	  			 if(res.data.code==200){
	  				 //可用
	  				this.$toast.success('验证码正确，输入密码');
	  				
	  			 }else{
	  				 //存在，不可用
	  				 this.$toast.fail('网络异常');
	  			 }
	  		  });
	  },
	  //实现账号的密码找回
	  register(){
		  var that=this;
		  this.axios.post("auth/findupdatepass",this.user).then((res) => {
		    console.log(res.data)
			if(res.data.code==200){
				//更新令牌
				this.$store.commit("setToken",res.data.data);
				//吐司，短暂的弹出窗，默认3秒自动消失
				this.$toast.success('密码找回成功跳转到登录');
				//成功-跳转到主页
				this.$router.push("/login");
			}else{
				this.$toast({
				  message: "亲，网络异常",
				  icon: 'close'
				});
			}
		  })
	  }
  }
}
</script>

<style>
</style>
